/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <h1 class="mui-title">{{currentHeader.title}}</h1>
    </header>
    <div class="mui-content" style="padding-top: 70px;">
      <div style="text-align: center;padding: 18px;">
        <input type="text" disabled v-model="payData.phone" placeholder={{language.PE}}><br>
        <input type="text" v-model="payData.authCode" @input='change' placeholder={{language.ETC}} class="Obtain">
        <button type="button" class="mui-btn mui-btn-enter" id="Obtain" v-text="code" @tap="Obtain"></button>
        <input type="password"  @input='change' id="password" class="input" v-model="payData.password"><br>
        <div id="placeholder" v-show="isShow" @click="clickDiv()" class="placeholder"></div>
        <input type="password" @input='change' v-model="payData.passwords" placeholder={{language.PA}}>
      </div>
      <!--<div class="red" v-html="tip"></div>-->
      <button type="button" id='button' disabled class="mui-btn mui-btn-SingIn" @tap="registerFn()">{{language.Reset}}</button>
    </div>
  </div>
</template>
<script>
  import store from '../login-store';
  import {tools} from 'tools';
  import {FastClick} from 'fastclick';
  var lan = require('./../language.json');
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        currentHeader: {
          title: lan[window.lan].paymentPassword
        },
        code: lan[window.lan].ObtainCode,
        count: 60,
        payData: {},
        isShow: true,
        r: tools.getQueryString('r'),
        language: lan[window.lan],
        login: store.state
      };
    },
    methods: {
      Obtain: function () {
        let [self, $dom] = [this, document.getElementById('Obtain')];
        $dom.setAttribute('disabled', true);
        self.code = self.language.Resend + '(' + self.count + ')';
        var fid = setInterval(function () {
          self.count = self.count - 1;
          self.code = self.language.Resend + '(' + self.count + ')';
          if (self.count === 0) {
            self.code = self.language.ObtainCode;
            self.count = 60;
            $dom.removeAttribute('disabled');
            window.clearInterval(fid);
          }
        }, 1000);
        store.Obtain(self.payData.phone, self.r, function () {
          window.clearInterval(fid);
          self.code = self.language.ObtainCode;
          self.count = 60;
          $dom.removeAttribute('disabled');
        });
      },
      clickDiv: function () {
        document.getElementById('password').focus();
      },
      change: function () {
        if (this.payData.password) {
          this.isShow = false;
        } else {
          this.isShow = true;
        };
        if (this.payData.phone && this.payData.authCode && this.payData.password && this.payData.passwords) {
          document.getElementById('button').removeAttribute('disabled');
        } else {
          document.getElementById('button').setAttribute('disabled', true);
        }
      },
      registerFn: function () {
        var self = this;
        store.payResetFn(this.payData, this.r, function () {
          self.$router.go('/registerSuccues/payReset');
        });
      }
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
      document.querySelector('head title').textContent = this.language.PayReset;
    },
    route: {
      data: function (data) {
        store.getPayInfo(this.r, value => {
          this.payData = {
            phone: value.phone || value.email, // 18165785240
            authCode: '', // DAbao123
            password: '', // DAbao123,
            passwords: '' // DAbao123,
          };
        });
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
      document.getElementById('placeholder').innerHTML = this.language.PMSC;
      FastClick.attach(document.body);
    }
  };
</script>
